<!-- 院校动态 -->
<template>
	<view>
		<view class="bxo">
			<view class="info">
				<view class="title">
					<text>{{stateDta.title}}</text>
					<text>发文时间：{{stateDta.createTime||'----'}}</text>
				</view>
				<view class="content font14 color999" v-if="info.articleDetail">
					<image mode="widthFix" v-if="info.articleDetail.showType==0 && info.articleDetail.imageUrl" :src="info.articleDetail.imageUrl"></image>
					<view v-if="info.articleDetail.showType==1" class="">
						<image v-if="info.articleDetail.url" :src="info.articleDetail.url" mode=""></image>
					</view>
					<view v-if="info.articleDetail.showType==2" class="">
						<view v-html="info.articleDetail.text"></view>
					</view>
					
					<view  class="fgt">
						<view v-if="info.attachFiles">
							<view v-for="item in info.attachFiles"  @click="privew(item.fileUrl)" :key="item.fileUrl">
								<view class="fileName">{{item.fileName}}</view>
							</view>
						</view>
					</view>
					<view class="fgt" v-if="info.articleDetail">
						<view v-html="info.articleDetail.text"></view>
					</view>
				</view>
				
				<view class="comment">
					<view class="judge">
						<text class="bold font16 txt">评论</text>
						<text class="font14">{{pcinfo.commentCount}}</text>
					</view>
					<view class="setview">
						<view class="item" v-for="(item,index) in comListL" :key="item.createTime">
							<view class="userinfo">
								<image :src="item.userLogo || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'"/>
								<!-- <image :src="item.userLogo||'/static/header.png'"></image> -->
								<view class="info-con flex">
									<text class="font14 bold">{{item.userName}}</text>
									<text class="font12 colorccc">{{item.createTime}}</text>
								</view>
							</view>
							<view class="comment-text">
								<text>{{item.content}}</text>
								<uni-icons class="del-icon" type="trash" size="20" color="#ccc" @click="dedeComent(item,index)" v-if="setuserId==item.userId"></uni-icons>
								<!-- <button class="font12" @click="dedeComent(item,index)" v-if="setuserId==item.userId">删除</button> -->
							</view>
						</view>
						<view class="null-txt font14 color999" v-if="comListL.length<=0">暂无评论</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 评论 -->
		<view class="judgeFixed flex alignCenter justConBetween font14">
			<view class="font14 inputBox">
				<input v-model="commentText" class="font14" type="text" placeholder="施主,善语结善缘" maxlength="50" placeholder-class="font14" confirm-type="send" @confirm="subComment">
			</view>
			<view class="fixedOper flex alignCenter justConEnd font12">
				<view class="" @click="AddarticleLike('good')">
					<image :src="pcinfo.isLike==1?'https://image.alhelp.net/uploads/20231104/c9f5e3a3e5ed54bfb52cb4acaff6245d.png':'https://image.alhelp.net/uploads/20231104/718c395eb3db60582c396acec8a85fc6.png'" mode="widthFix"></image>
					<view class="">点赞{{pcinfo.likeCoount}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { articleContent,browseRecords,getCommentList,getComment,deleteComment,AddarticleLike,insertComment} from '@/api/toolbox.js'
	export default {
		data() {
			return {
				pages:1,
				total: 0,
				comListL:[],
				item: {
					share: 1023,
					commentNum: 1009,
					isGoods: false,
					isShare: false,
					isFollow: false,
					isCollection: false,
					isConversation: false,
					comment: [],
				},
				setuserId:'',
				stateDta: {},
				commentText:'',
				pcinfo:'',
				info:''
			};
		},
		onLoad(op) {
			this.stateDta = JSON.parse(uni.getStorageSync('article'));
			this.articleContent()
			this.browseRecords();
			this.getcommentList();
			this.PmComment();
			this.setuserId = uni.getStorageSync('userId');
		},
		methods: {
			privew(fileLink){
				if(!fileLink) {
					return false
				}
				uni.showLoading({
					title:'加载中...',
					mask:true
				})

				// 单次下载允许的最大文件为 200MB
				wx.downloadFile({
					url: fileLink, // 地址已打码，自己换个其他的地址("https://www.xxxxx.com/file/测试通知.pdf")
					success: function (res) {
						if(res.statusCode != 200) {
							uni.hideLoading()
							return false
						}
						var Path = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用
						wx.openDocument({
							filePath: Path,
							showMenu: true,
							success: function (res) {
								console.log('打开成功');
								uni.hideLoading()

							}
						})
					},
					fail: function (err) {
						console.log(err, "wx.downloadFile fail err");
						//util.hideLoadingWithErrorTips()
						uni.hideLoading()

					}
				})
			},
			// 获取文章详情
			articleContent() {
				articleContent({
					"articleCollectId": this.stateDta.id
				}).then(res => {
					this.info = res.data;
				})
			},
			// 添加浏览记录
			browseRecords() {
				browseRecords({
					"articleCollectId": this.stateDta.id
				}).then(res => {
					console.log(res)
				})
			},
			
			//获取评论内容
			getcommentList(){
				getCommentList({
					page: this.pages,
					pageSize: 10,
					articleId:this.stateDta.id
				}).then(res => {
					if (res.data.list.length===0){
						return;
					}
					if (this.pages > 1){
						this.total = res.data.total;
						res.data.list = this.comListL.concat(res.data.list);
					}
					this.comListL = res.data.list;

				})
			},
			
			subComment(){
				if (this.commentText===''){
					uni.showToast({
						title:"请输入评论语句!",
						icon:'none'
					})
					return
				}
				let avatar= uni.getStorageSync('userInfo').avatar;
				let nickName= uni.getStorageSync('userInfo').nickName;
				let userId = uni.getStorageSync('userId')
				insertComment({
					articleId:this.stateDta.id,
					content:this.commentText,
					userId: userId,
					userLogo: avatar,
					userName: nickName
				}).then(res => {
					uni.showToast({
						title:"评论成功",
						icon:'none',
						duration:1000
					});
					let pam={
						articleId:this.stateDta.id,
						content:this.commentText,
						userId: userId,
						userLogo: avatar,
						userName: nickName
					};
					this.comListL.unshift(pam);
					this.PmComment();
					this.getcommentList();
					this.commentText=''
				})
			},
			
			// 文章点赞评论查询
			PmComment(){
				getComment({ 
					articleId: this.stateDta.id
				}).then(res => {
					if (res.code===100000){
						this.pcinfo=res.data
					}
				})

			},
			dedeComent(item,indexs){
				uni.showModal({
					title: '提示',
					content: '确定删除该评论吗？',
					success:(res)=> {
						if (res.confirm) {
							deleteComment({
								id:item.id,	
							}).then(res => {
								if (res.code===100000){
									uni.showToast({
										title:'删除成功',
										icon:'none',
										duration: 500
									})
									this.$delete(this.comListL,indexs)
									this.PmComment();
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			// 点赞
			AddarticleLike(){
				AddarticleLike({
					articleCollectId:this.stateDta.id,
					userId: uni.getStorageSync('userId')
				}).then(res => {
					if (res.code===100000){
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration: 500
						})
						this.PmComment()
					}
				})

			},
		},
		
		//底部刷新
		onReachBottom() {
			if(this.comListL.length<this.total){
				++this.page
				this.getcommentList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		// background-color: #f2f2f2;
		background-color: #fff;
	}
	
	.comment-inputs{
		margin-top: 30rpx;
	}
	.fgt{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		word-break: break-all;
		overflow-wrap: break-word;

	}
	.fileName{
		color: #1292ec;
		margin-bottom: 20rpx;
	}
	.setview{
		width: 100%;
		padding-bottom: 80rpx;
		// height: 80vh;
	}
	.zmview{
		width: 100%;
		height: 100%;
	}
	.smt{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.info {
		flex: 1;
		// overflow: auto;
	}
	.newinput{
		width: 50vw;
		border: 2rpx solid #999;
		height: 50rpx;
		border-radius: 25rpx;
	}
	.newinput input{
		padding: 0 20rpx;
	}

	.submit-fa button{
		background: #11BE96;
		margin-left: 20rpx;
		font-size: 26rpx;
		padding: 10rpx 32rpx;
		border-radius: 62rpx;

	}
	.seticon{
		margin-left: auto;
	}
	.title {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.title text {
		font-size: 36rpx;
		color: #2c3e50;
		line-height: 1.5;
	}

	.title text+text {
		font-size: 28rpx;
		color: #bfbfbf;
		line-height: 45rpx;
	}

	.content {
		margin-top: 15rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 40rpx;
		border-bottom: 2rpx dashed #ccc;
	}

	.content image {
		/*width: 100%;*/
		border-radius: 15rpx;
		margin: 10rpx 0;
	}

	.content text {
		// font-size: 26rpx;
		// color: #999;
		line-height: 48rpx;
		text-indent: 2rem;
	}

	.comment {
		width: 100%;
		// margin-top: 50rpx;
		padding-top: 30rpx;
		// border-top: 1rpx solid #eee;
	}

	.comment .statistics {
		font-size: 26rpx;
		color: #bfbfbf;
	}

	.comment .item {
		width: 100%;
		// margin-top: 20rpx;
		// border-bottom: 1px dashed #999;
		// padding-bottom: 27rpx;
		border-bottom: 1px solid #f0f0f1;
		padding: 30rpx 0;	
	}
	.null-txt{
		text-align: center;
		// margin-top: 80rpx;
	}
	.userinfo {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.userinfo image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #fafafa;
	}

	.userinfo .info-con {
		margin-left: 15rpx;
		// display: flex;
		flex-direction: column;
	}

	.comment-text {
		margin-top: 20rpx;
		position: relative;
		// padding-bottom: 50rpx;
		text {
			font-size: 28rpx;
			color: #333;
			line-height: 1.4;
			text-align: justify;
		}
		.del-icon{
			position: absolute;
			// bottom: 0;
			top: -100rpx;
			right: 0px;
			// font-size: 28rpx;
			color: #e74c3c;
			height: 50rpx;
			line-height: 50rpx;
			// margin-right: 128rpx;
		}	
	}
	// 输入框
	.comment-input {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 100rpx;
		background-color: white;
		box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, .1);
		padding: 20rpx;

		.le {
			border-radius: 100rpx;
			border: 2rpx solid #CCCCCC;
			height: 100%;
			width: 50vw;
			padding: 0 20rpx;
			color: #CCCCCC;

			.icon {
				flex-shrink: 0;
				padding-right: 10rpx;
			}

			.input {
				flex-grow: 1;
				width: 0;

				input {
					padding: 8rpx 0;
					width: 100%;
					height: 100%;
					font-size: 26rpx;
					color: #333;
				}
			}
		}

		.ri {
			padding-left: 20rpx;
			flex-grow: 1;
			width: 0;
			justify-content: space-around;

			.ri-item {
				color: #999999;

				i {
					font-size: 50rpx;
				}
			}

			.ri-item.or {
				color: #EFCE4A
			}

			.ri-item.red {
				color: #F30240;
			}

			.ri-item.blue {
				color: #2867CE
			}

			.ri-item.green {
				color: #37D89F
			}
		}
	}
	.bxo {
		box-sizing: border-box;
		padding: 35rpx 40rpx;
		display: flex;
		flex-direction: column;
	}
	
	.judge{
		// margin: 20rpx 0;
		position: sticky;
		top: 0px;
		/* #ifdef H5 */
		top: 80rpx;
		/* #endif */
		z-index: 1;
		background: #fff;
		padding-bottom: 30rpx;
		.judgeTitle{
			position:relative;
			margin:0 0 40rpx;
		}
		.fixedTop{
			position: fixed;
			width: 100%;
			left:0;
			top: 0;
			background: rgba(255, 255, 255, 1);
			padding:90rpx 30rpx 0;
			box-sizing: border-box;
			z-index: 100;
			border-bottom: 1px solid $bordercolor;
		}
		.txt{
			display: inline-block;
			margin:0 10rpx 0 0;
			&::after{
				content:'';
				display: block;
				background: $colorMain;
				height: 10rpx;
				border-radius: 20rpx;
				box-shadow: 0 6px 10px rgba(0,0,0,.15);
			}
		}
		.ansList{
			&>view:last-child{
				border-bottom: none;
			}
		}
	}
	.judgeFixed{
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		z-index: 10;
		border-top: 1px solid $bordercolor;
		.inputBox{
			border:1px solid $bordercolor;
			border-radius: 40rpx;
			max-width: 400rpx;
			flex-shrink: 0;
			input{
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 20rpx 0;
				box-sizing: border-box;
			}
		}
		image{
			width: 40rpx;
			height: 40rpx;
			display: block;
			margin: 0 auto;
		}
		.fixedOper{
			flex:1;
			text-align: center;
			&>view{
				margin:0 0 0 30rpx;
			}
		}
	}
</style>
